<template>
  <div style="height: 100%;">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
export default {
  name: "call-map",
  data() {
    return {
      map: null,
      point: "",
      item: ""
    }
  },
  created() {
    this.init();
  },
  mounted() {
    this.$nextTick(() => {
      // 1. 地图初始化
      this.initMap();
      // 2. 定制
      this.customMap();
    })
  },
  methods: {
    init() {
      this.point = JSON.parse(this.$route.query.point)
      this.item = JSON.parse(this.$route.query.item)
    },
    initMap() {
      this.map = new BMap.Map("map");
      // this.point = new BMap.Point(116.404, 39.915) 天安门(test)
      this.point = new BMap.Point(this.point.lng, this.point.lat)
      // 创建点坐标
      this.map.centerAndZoom(this.point, 15);
    },
    // 增加overlay
    customMap() {
      // 覆盖物
      let marker = new BMap.Marker(this.point);  // 创建标注
      this.map.addOverlay(marker);
      // 信息提示
      let item = this.item;
      let sContent = `${item.title}</br>电话:${item.number}<br/>距离:${item.distance}公里`

      // 创建信息窗口对象
      let infoWindow = new BMap.InfoWindow(sContent);

      // event
      marker.addEventListener('click', function () {
        this.openInfoWindow(infoWindow, this.point);
      });

      //开启信息窗口
      marker.openInfoWindow(infoWindow, this.point);
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  height: 100%;
}
</style>
